<template>
    <div class="personal-center">
        <el-card class="card">
            <!-- <template #header>
                <div class="card-header">个人中心</div>
            </template> -->
            <el-table :data="tableData" border style="width: 1000px; margin: 10px auto;">
                <el-table-column label="信息项" width="120">
                    <template #default="scope">
                        {{ scope.row.label }}
                    </template>
                </el-table-column>
                <el-table-column label="详情">
                    <template #default="scope">
                        <template v-if="scope.row.key === 'avatarPath'">
                            <img :src="scope.row.value" alt="Avatar" class="avatar-table">
                        </template>
                        <template v-else>
                            {{ scope.row.value }}
                        </template>
                    </template>
                </el-table-column>
            </el-table>
            <div class="action-buttons">
                <button @click="showEditInfoDialog = true" type="primary" round>修改个人信息</button>
                <button @click="showChangePasswordDialog = true" type="primary" round>修改密码</button>
            </div>
        </el-card>
  
        <!-- 修改个人信息弹窗 -->
        <el-dialog v-model="showEditInfoDialog" title="修改个人信息" class="dialog">
                <el-form :model="editUserInfo" ref="editFormRef" label-width="100px">
                    <el-form-item label="用户名">
                        <el-input v-model="editUserInfo.username" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="姓名">
                        <el-input v-model="editUserInfo.name"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号">
                        <el-input v-model="editUserInfo.phone"></el-input>
                    </el-form-item>
                    <el-form-item label="公司名称">
                        <el-input v-model="editUserInfo.companyName"></el-input>
                    </el-form-item>
                </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="showEditInfoDialog = false" type="info" round>取消</el-button>
                    <el-button type="primary" @click="submitEditInfo" round>确定</el-button>
                </span>
            </template>
        </el-dialog>
  
        <!-- 修改密码弹窗 -->
        <el-dialog v-model="showChangePasswordDialog" title="修改密码" class="dialog">
                <el-form :model="passwordForm" ref="passwordFormRef" label-width="100px">
                    <el-form-item label="原密码">
                        <el-input v-model="passwordForm.oldPwd" type="password"></el-input>
                    </el-form-item>
                    <el-form-item label="新密码">
                        <el-input v-model="passwordForm.newPwd" type="password"></el-input>
                    </el-form-item>
                    <el-form-item label="确认新密码">
                        <el-input v-model="passwordForm.rePwd" type="password"></el-input>
                    </el-form-item>
                </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="showChangePasswordDialog = false" type="info" round>取消</el-button>
                    <el-button type="primary" @click="submitChangePassword" round>确定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
  </template>
  
  <script>
  import axios from 'axios';
  import { ElMessage } from 'element-plus';
  export default {
    data() {
        return {
            userInfo: {},
            showEditInfoDialog: false,
            showChangePasswordDialog: false,
            showFavoriteListDialog: false,
            editUserInfo: {},
            passwordForm: {
                oldPwd: '',
                newPwd: '',
                rePwd: ''
            },
            uploadUrl: '/user/upload/avatar',
            tableData: [],
            avatarPath: '',
            favoriteList: [],
            imagePathList: []
        };
    },
    components:{
    },
    mounted() {
        this.fetchUserInfo();
    },
    methods: {
        // 获取用户信息
        async fetchUserInfo() {
            try {
                const response = await axios.get('/customer/info');
                this.userInfo = response.data.data;
                this.editUserInfo = { ...this.userInfo };
                this.tableData = [
                    { label: '用户名', key: 'username', value: this.userInfo.username },
                    { label: '姓名', key: 'name', value: this.userInfo.name },
                    { label: '手机号', key: 'phone', value: this.userInfo.phone },
                    { label: '公司名称', key: 'companyName', value: this.userInfo.companyName },
                ];
            } catch (error) {
                ElMessage.error('获取用户信息失败');
            }
        },
        // 提交修改个人信息
        async submitEditInfo() {
            this.$refs.editFormRef.validate(async (valid) => {
                if (valid) {
                    try {
                        const response = await axios.put('/customer/update', this.editUserInfo);
                        if (response.data.code === 200) {
                            ElMessage.success('个人信息修改成功');
                            this.userInfo = { ...this.editUserInfo };
                            this.tableData = [
                                { label: '用户名', key: 'username', value: this.userInfo.username },
                                { label: '姓名', key: 'name', value: this.userInfo.name },
                                { label: '手机号', key: 'phone', value: this.userInfo.phone },
                                { label: '公司名称', key: 'companyName', value: this.userInfo.companyName },
                            ];
                            this.showEditInfoDialog = false;
                        } else {
                            ElMessage.error(response.data.message || '个人信息修改失败');
                        }
                    } catch (error) {
                        ElMessage.error('请检查输入信息');
                    }
                } else {
                    ElMessage.error('请检查输入信息');
                }
            });
        },
        // 提交修改密码
        async submitChangePassword() {
            this.$refs.passwordFormRef.validate(async (valid) => {
                if (valid) {
                    if (this.passwordForm.newPassword!== this.passwordForm.confirmPassword) {
                        ElMessage.error('两次输入的新密码不一致');
                        return;
                    }
                    try {
                        const response = await axios.put('/customer/password', this.passwordForm);
                        if (response.data.code === 200) {
                            ElMessage.success('密码修改成功');
                            this.showChangePasswordDialog = false;
                            this.passwordForm={};
                        } else {
                            ElMessage.error(response.data.message || '密码修改失败');
                        }
                    } catch (error) {
                        ElMessage.error('请检查输入信息');
                    }
                } else {
                    ElMessage.error('请检查输入信息');
                }
            });
        },
    }
  };
  </script>
  
  <style scoped>
  .personal-center {
    padding: 20px;
    height: 720px;
    background-color: #f9fafc;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  }
  
  .card {
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    padding: 20px;
    transition: all 0.3s ease;
  }
  
  .card:hover {
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  }
  
  .card-header {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
    /* border-bottom: 1px solid #e0e0e0; */
    padding-bottom: 10px;
  }
  
  .avatar-table {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
  }
  
  .action-buttons {
    margin-top: 20px;
    /* display: flex; */
    justify-content: space-around;
  }
  .action-buttons button {
    margin-top: 10px;
    margin-left: 20px;
    margin-right: 20px;
    padding: 5px 15px;
    border-radius: 15px;
    background-color: #13843c;
    color: #fff;
  }
  .action-buttons button:hover {
    transform: scale(1.05);
    background-color: #18a44b;
  }
  .dialog {
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  }
  
  .dialog-footer {
    display: flex;
    justify-content: space-around;
    padding: 10px 0;
  }
  
  .favorite-image {
    width: 100%;
    height: auto;
    object-fit: cover;
  }
  </style>